<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Jquery Ajax 01 Page</h1>
        <button onclick="doAjax()">$.ajax(...)</button>
        <button onclick="doAjaxPost()">$.post(...)</button>
        <button onclick="doAjaxGet()">$.get(...)</button>
        <button onclick="doAjaxLoad()">$("..").load(...)</button>
    </div>
    <div id="result"></div>
    <script src="/js/jquery.min.js"></script>
    <script>
        function doAjaxLoad() {
            let url="/doAjaxGet"
            //在指定位置异步加载url的对应资源
            //这里的load函数为ajax异步get请求参数
            //语法load（url[，params][，callback]）
            $("#result").load(url,function (){//此函数会在异步加载完成后执行
                console.log("load complete")
            });
        }
        //基于jquery中的ajax函数向服务器发送Ajax Post请求
        function doAjaxPost() {
            //1、定义url
            let url ="/doAjaxPost"
            //    2、定义请求参数
            let params="id=200&name=oppo&remark=very good"
            //    3、发送post请求
            $.post(url,params,function(result){
                $("result").html(result);
            })//post函数jquery是中Ajax函数的一种演变形式
        }
        //基于jquery中的get函数向服务器发送Ajax get请求
        function doAjaxGet() {
            //1、定义url
            let url ="/doAjaxGetx"
            //    2、定义请求参数
            let params=""
            //    3、发送post请求
            $.get(url,params,function(result){
                //服务端返回的数据假如满足json格式，get函数自动会将这个json格式的字符串转换为js对象
                // console.log("result",result)
                //$("result").html(JSON.stringify(result));//html函数只接收字符串
                $("result").html(result);
            },"text")//get函数jquery是中Ajax函数的一种演变形式
        //    text为数据类型
        }
        //基于jquery中的ajax函数向服务器发送异步请求
        function doAjax() {
        //1、定义url
            let url ="/doAjaxPost"
        //    2、定义请求参数
            let params="id=200&name=oppo&remark=very good"
        //    3、发送异步请求（底层会借助XmlHttpRequest对象）
            $.ajax({//符号为jquery对象，ajax（）为jquery中的ajax函数
                type:"POST",//不写这个选项默认为get请求
                url:url,
                data:params,
                success:function (result) {
                    $("#result").html(result);
                }
            })
        }
    </script>

</body>
</html>